<!--实现多输入框动态加载-->
<template>
  <el-row class="version-checkbox-box">
    <el-form v-for="(status, version, index) in checkBoxStatus" :key="index">
      <el-form-item prop="prodVersion">
        <el-checkbox-group v-model="checkBoxStatus[version]">
          <el-checkbox :label="version" @change="handleCheckedVersionsChange" :checked="status">{{version}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!--动态绑定-->
      <el-form-item :prop="'prodPrice'+index">
        <el-input
          class="prod_input_box"
          :ref="'prodPrice_'+index"
          v-if="checkBoxStatus[version]"
          v-model.number.lazy.trim="selectedPrice[version]"
          placeholder="请输入价格"
          blur="validateForm"
          maxlength="10"
          show-word-limit
        />
      </el-form-item>

      <el-form-item prop="prodCount">
        <el-input
          class="prod_input_box"
          :ref="'prodCount_'+index"
          v-if="checkBoxStatus[version]"
          v-model.number.lazy.trim="selectedCount[version]"
          prefix-icon
          placeholder="请输入数量"
          maxlength="10"
          show-word-limit
          blur="validateForm"
        />
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
export default {
  name: "VersionSelect",
  props:['detailList'],
  data() {
    return {
      prodDetailList: this.detailList,
      ruleCheck: true,
      //选中版本及状态
      checkBoxStatus:{
        "4+64G": false,
        "6+128G": false,
        "8+128G": false
      },
      selectedPrice: [],
      selectedCount: [],
    /**
     * {'4+64G': 120},'6+128G': 34, '8+128G': 56}
     */
    }
  },
  mounted() {
    this.updateProd();
    console.log("updat:", this.prodDetailList)

  },
  methods: {
    handleCheckedVersionsChange(status,$event){
      console.log("list:", this.prodDetailList)
      if (!status){
        // console.log(this.selectedPrice[$event.target.defaultValue])
        // this.selectedPrice[$event.target.defaultValue] = undefined;
        // this.selectedCount[$event.target.defaultValue] = undefined;
        //删除对象内的键值
        delete this.selectedPrice[$event.target.value]
        delete this.selectedCount[$event.target.value]
      }
      console.log(this.selectedPrice, this.selectedCount)
      this.$bus.$emit("receive", this.selectedPrice, this.selectedCount)
    },
    validateForm(){
      let flag = false
      for (let key in this.checkBoxStatus) {
        if (this.checkBoxStatus[key] && this.selectedCount[key] && this.selectedPrice[key]){
          flag = true;
        }
        // let b = this.checkBoxStatus[key] && this.selectedCount[key];
      }
      return flag;
    },
    updateProd() {
      for (let detailListKey in this.detailList){
        this.checkBoxStatus[this.detailList[detailListKey].prodVersion] = true;
        this.selectedPrice[this.detailList[detailListKey].prodVersion] = this.detailList[detailListKey].prodPriceCurrent;
        this.selectedCount[this.detailList[detailListKey].prodVersion] = this.detailList[detailListKey].prodCount;
      }
    }
  }
}
</script>

<style scoped>
  .version-checkbox-box el-form el-form-item el-input{
    width: 200px;
  }
</style>

<style>
.prod_input_box{
  margin-bottom: 5px;
  width: 250px;
}
</style>
